<template>
  <view class="container">
    <!-- 用户信息展示 -->
    <view class="user-info" v-if="user">
      <text class="welcome">欢迎, {{ user.name || user.tel }}</text>
      <text class="info-item">姓名: {{ user.titlename }}</text>
      <text class="info-item">手机号: {{ user.tel }}</text>
      <text class="info-item">车牌: {{ user.car }}</text>
      <text class="info-item">身份证: {{ user.sfz }}</text>
      <text class="info-item">详细地址: {{ user.city }}</text>
      <text class="info-item">Email: {{ user.email }}</text>
      <text class="info-item">角色: {{ getRoleName(user.role) }}</text>
      <text class="info-item">注册时间: {{ user.created_at }}</text>
    </view>
    
    <!-- 编辑表单 -->
    <view class="edit-form" v-if="isEditing">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="姓名" name="titlename">
          <uni-easyinput v-model="formData.titlename" placeholder="请输入姓名" />
        </uni-forms-item>
        <uni-forms-item label="手机号" name="tel">
          <uni-easyinput v-model="formData.tel" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item label="车牌号" name="car">
          <uni-easyinput v-model="formData.car" placeholder="请输入车牌号" />
        </uni-forms-item>
        <uni-forms-item label="身份证" name="sfz">
          <uni-easyinput v-model="formData.sfz" placeholder="请输入身份证号" />
        </uni-forms-item>
        <uni-forms-item label="地址" name="city">
          <uni-easyinput v-model="formData.city" placeholder="请输入详细地址" />
        </uni-forms-item>
        <uni-forms-item label="Email" name="email">
          <uni-easyinput v-model="formData.email" placeholder="请输入Email" />
        </uni-forms-item>
        <uni-forms-item label="新密码" name="password">
          <uni-easyinput type="password" v-model="formData.password" placeholder="如需修改密码请填写" />
        </uni-forms-item>
      </uni-forms>
      
      <view class="button-group">
        <button class="btn btn-primary" @click="submitForm">保存</button>
        <button class="btn btn-secondary" @click="cancelEdit">取消</button>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="button-group" v-if="!isEditing">
      <button class="btn btn-primary" @click="startEdit">编辑资料</button>
      <button class="btn btn-secondary" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: null,
      isEditing: false,
      formData: {
        titlename: '',
        tel: '',
        car: '',
        sfz: '',
        city: '',
        email: '',
        password: ''
      },
      rules: {
        titlename: {
          rules: [{
            required: true,
            errorMessage: '请输入姓名'
          }]
        },
        tel: {
          rules: [{
            required: true,
            errorMessage: '请输入手机号'
          }, {
            pattern: /^1[3-9]\d{9}$/,
            errorMessage: '手机号格式不正确'
          }]
        },
        car: {
          rules: [{
            required: true,
            errorMessage: '请输入车牌号'
          }]
        }
      }
    }
  },
  onLoad() {
	  
    this.loadUserData();
  },
  methods: {
    loadUserData() {
      this.user = uni.getStorageSync('user');
      if (!this.user) {
		uni.showToast({
		  title: '请先登录',
		  icon: 'none'
		});
        uni.switchTab({
          url: '/pages/user/login'
        });
      }
    },
    getRoleName(role) {
      const roles = {
        1: '管理员',
        2: '操作员',
        3: '查看员'
      };
      return roles[role] || '未知角色';
    },
    startEdit() {
      this.isEditing = true;
      // 填充当前用户数据到表单
      this.formData = {
        titlename: this.user.titlename,
        tel: this.user.tel,
        car: this.user.car,
        sfz: this.user.sfz || '',
        city: this.user.city || '',
        email: this.user.email || '',
        password: ''
      };
    },
    cancelEdit() {
      this.isEditing = false;
      this.formData = {
        titlename: '',
        tel: '',
        car: '',
        sfz: '',
        city: '',
        email: '',
        password: ''
      };
    },
    async submitForm() {
      try {
        // 验证表单
        await this.$refs.form.validate();
        
        // 添加用户ID到提交数据
        const submitData = {
          ...this.formData,
          id: this.user.id
        };
        
        // 显示加载中
        uni.showLoading({
          title: '更新中...',
          mask: true
        });
        
        // 调用API更新用户信息
        const [error, res] = await uni.request({
          url: 'http://192.168.1.42:8000/api/auth.php?action=update',
          method: 'POST',
          data: submitData,
          header: {
            'Content-Type': 'application/json'
          }
        });
        
        // 处理响应
		if (error) {
		  throw new Error('网络请求失败');
		}
		
		if (res.data.error) {
		  throw new Error(res.data.message);
		}
        
        // 更新本地存储的用户信息
        const updatedUser = {
          ...this.user,
          ...res.data.user
        };
        uni.setStorageSync('user', updatedUser);
        this.user = updatedUser;
        
        // 提示成功
        uni.showToast({
          title: '资料更新成功',
          icon: 'success'
        });
        
        this.isEditing = false;
		this.loadUserData();
      } catch (error) {
        uni.showToast({
          title: error.message || '更新失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    handleLogout() {
      uni.removeStorageSync('user');
      uni.switchTab({
        url: '/pages/user/login'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.user-info {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.welcome {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}
.info-item {
  display: block;
  margin-bottom: 8px;
  color: #666;
}
.edit-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn {
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
}
.btn-primary {
  background-color: #007aff;
  color: white;
}
.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}
</style>